<script setup lang="ts">
defineOptions({
  name: "topology"
});

import { ref, computed, defineAsyncComponent, inject } from "vue";
import { type SubjectType } from "@/utils/types";

// const topologyModel = defineAsyncComponent(() => import("./components/topologyModel.vue"));
const topologyPages = defineAsyncComponent(() => import("./components/topologyPages.vue"));

type Props = {
  height?: string;
};

const props = withDefaults(defineProps<Props>(), { height: "648px" });

const subject = inject("subject", ref<SubjectType>("MACHINE"));
</script>

<template>
  <div class="topology">
    <Suspense>
      <template #fallback>
        <div v-loading="true" class="topology-loading" element-loading-background="rgba(120, 120, 120, 0.1)" />
      </template>
      <template #default>
        <topologyPages />
      </template>
    </Suspense>
  </div>
</template>

<style lang="scss" scoped>
.topology {
  width: 100%;
  height: v-bind(height);

  .topology-loading {
    width: 100%;
    height: 100%;
  }
}
</style>
